<template>
  <el-date-picker
    v-model="date"
    type="daterange"
    align="right"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd"
    :picker-options="pickerOptions2">
  </el-date-picker>
</template>

<script>
    export default {
        name: "chooseDate",
        data(){
          return{
            pickerOptions2: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            date:[]
          }
        },
        methods:{
          getDate(){
            if(this.date && this.date.length){
              return {
                start:this.date[0],
                end:this.date[1]
              }
            }
            return false;

          }
        }

    }
</script>

<style scoped lang = "scss">
  .m-controler {

    .title {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #000000;
      letter-spacing: 0;
      display: inline-block;
      margin: 10px 0 27px;
      line-height: 1;
    }

    .m-btn {
      display: inline-block;
      background: #FFED8C;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;
      border-radius: 100px;
      padding: 5px 10px;
      cursor: pointer;
      margin-left: 10px
    }

    .controler-box {
      background: #FFFFFF;
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);
      padding: 30px;
    }

  }
</style>
